const path = require('path');

// 插件的使用1. 引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 其他引入
const HtmlWebpackPlugin = require("html-webpack-plugin");

// 1. webpack.config.js vue的加载器必须配置这个插件使用
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {	// 3. 配置vue-loader
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    // 提取css的插件使用第三步, 修改加载器
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,	// 匹配图片文件
                use: [
                    {
                        loader: "file-loader",              // 处理图片文件返回链接
                        options: {
                            outputPath: "images"            //  输出到dist下的images目录
                        }
                    }
                ]
            },
            {
                test: /\.ttf$/,
                use: [
                    {
                        loader: "file-loader",              // 处理图片文件返回链接
                        options: {
                            outputPath: "assets"            //  输出到dist下的images目录
                        }
                    }
                ]
            }
        ]
    },
    // 添加插件配置选项
    plugins: [
        // 插件使用2. plugins 属性当中,创建实例, 按需添加参数
        // 这个插件如果不放任何参数, 默认生成 main.css 文件
        // 如果想要修改文件名, 就可以给一个配置对象, 然后里面添加 filename 属性
        new MiniCssExtractPlugin(),
        // + 新增配置：打包时会根据这个html文件在打包出的dist文件下生成新的html文件，但这个文件会自动导入入口js文件
        new HtmlWebpackPlugin({
            template: "public/index.html"	// template指定默认html模板
        }),
        // 2. 使用vue的插件  请确保引入这个插件！
        new VueLoaderPlugin()

    ]

}